<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>edtor</title>
  <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
  <div class="wrap">
    <div id="content">

      ## 事件机制 冒泡和捕获
         事件捕获：事件从最上一级标签驾驶往下查找，知道捕获到事件目标（target）
         事件冒泡：事件从事件目标（target）开始，网上冒泡直到页面上的最上一级标签
         事件流：1.捕获阶段2.目标阶段3.冒泡阶段
         捕获事件的具体流程：
          捕获：window->document->html->body->target
          冒泡：target->parent->body->html->document->window
         阻止冒泡：stopPropagation()
         阻止默认事件:preventDefault()

      ## Dom事件处理程序
         DOM0级：是把函数赋值给一个事件的处理程序属性，btn.onclick()
         DOM2级：事件定义了两个方法，用于处理指定和删除事件处理程序的操作；addEventListerner()和removerEventListerner()
         DOM3级：DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了  一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。UI事件；焦点事件；鼠标事件；键盘事件；合成事件；变动事件；滚轮事件；文本事件.....

      ## DNS解析工作原理
         1.客户机提出域名解析请求，并将该请求发送回本地的域名服务器
         2.当本地的域名服务器收到请求后，就先查询本地的缓存，如果有该项记录项，则本地的域名服务器就直接把查询结果返回；
         3.如果本地服务器没有缓存该记录，则本地域名服务器就直接把请求发给根域名服务器，然后根域名服务器在返回给本地域名服务器一个所查询（根的子域）的主域名服务器的地址；
         4.本地服务器在向上一步返回域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录，则返回相关的下级的域名服务器的地址；
         5.重复第四步，直到找到正确的记录
         6.本地域名服务器返回的结果保存到缓存，以备下一次使用，同事还将结果返回客户机

         dns预解析优点：在浏览网页的时候，网页的打开的时候，就进行域名解析缓存，在单机当前网页中的连接的时候就无需进行dns的解析，减少用户等待，提到用户体验
    </div>
  </div>
<script src="marked.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
var rendererMD = new marked.Renderer();
marked.setOptions({
      renderer: rendererMD,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false
    });
    var markdownString = '```css \n.class {\nbackground: url( ... ) no-repeat left center;\n }\n```';
    marked.setOptions({
        highlight: function (code) {
        return hljs.highlightAuto(code).value;
      }
    });
   marked(document.getElementById('content').innerHTML);
</script>
</body>
</html>
